<template>
    <div>
        <searchBox @searchChange = "searchChange" />
        <div class="gva-table-box">
        <el-card>
            <el-row  style="margin:30px auto">
                <el-col :span="2"></el-col>
                <el-col :span="5">
                    <el-statistic title="广告请求PV" :value="requestSum" />
                </el-col>
                <el-col :span="5">
                    <el-statistic title="曝光PV" :value="showSum" />
                </el-col>
                
                <el-col :span="5">
                    <el-statistic title="ECPM" precision="2" :value="ecpmSum"/>
                </el-col>
                <el-col :span="5">
                    <el-statistic title="广告收入(元)" precision="2" :value="outputValue" />
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
        </el-card>
    </div>
    <div class="gva-table-box">
        <div class="gva-btn-list"><el-text class="mx-1" size="large">指标趋势</el-text></div>
    </div>
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
    <div class="gva-table-box">
    <el-text class="mx-1" size="large">详细数据</el-text>
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="广告请求PV"
          prop="request"
        >
          
        </el-table-column>
        <el-table-column
          align="left"
          label="曝光PV"
          prop="show"
        />
        <el-table-column
          align="left"
          label="ECPM"
          prop="eCPM"
        />
        <el-table-column
          align="left"
          label="广告收入(元)"
          prop="realCost"
        >
        </el-table-column>
      </el-table>
    </div>
        </div>
    </template>  
    <script lang="ts" setup>
    import { ref,watch } from 'vue'
    import lineChart from '../../components/echarts/lineChart.vue';
    import searchBox from '../../components/search/searchBox.vue';
    import { useTransition } from '@vueuse/core'
    import type { TabsPaneContext } from 'element-plus';
    import { getHugeList } from '@/api/openApi'
    import { sumByKey } from '../../utils/fmtData'
// =========== 表格控制部分 ===========
const page = ref(1)
const tableData = ref([])
const lineData = ref([])
const searchInfo = ref({})
const activeName = ref<string|number>('first')
const showPv = ref(null); 
const handleClick = (tab: TabsPaneContext, event: Event) => {
  lineData.value = []
  setTimeout(() => {
    lineData.value = JSON.parse(JSON.stringify(tableData.value))
  }, 200);
}




var searchChange = function(date){
  searchInfo.value = date
  getTableData()
}

// 查询
const getTableData = function() {
  getHugeList({  type: 'flow', ...searchInfo.value }).then(res=>{
    if (res.code === 0) {
      let arr = []
      res.data.list.forEach(element => {
          if(element.response)
            arr.push(JSON.parse(element.response))
      });
      lineData.value = tableData.value = sumByKey(arr,'date')
    }
  })
  
}

const requestSum = ref(0)
const showSum = ref(0)
const ecpmSum = ref(0)
const costSum = ref(0)
const chartData = ref({
  xAxis: [],
  series: [
    {
      name: '广告请求PV',
      type: 'line',
      data: []
    },
    {
      name: '曝光PV',
      type: 'line',
      data: []
    },
    {
      name: 'ECPM',
      type: 'line',
      data: []
    },
    {
      name: '广告收入',
      type: 'line',
      data: []
    }
  ],
  legend: ['广告请求PV','曝光PV','ECPM','广告收入'],
  title: '流量主'
})
const getSum = function(){
  chartData.value.xAxis = []
    chartData.value.series[0].data = []
    chartData.value.series[1].data = []
    chartData.value.series[2].data = []
    chartData.value.series[3].data = []
  let letRequestSum = 0,letShowSum= 0,letEcpmSum=0,letCostSum= 0
  tableData.value.forEach(element => {
    letRequestSum += element['request']
    letShowSum += element['show']
    letCostSum += element['realCost']
    chartData.value.xAxis.push(element['date'])
    chartData.value.series[0].data.push(element['request'])
    chartData.value.series[1].data.push(element['show'])
    chartData.value.series[2].data.push(element['eCPM'])
    chartData.value.series[3].data.push(element['realCost'])
  })
  requestSum.value = letRequestSum
  showSum.value = letShowSum
  costSum.value = letCostSum
  ecpmSum.value = ((costSum.value/showSum.value))*1000
}
const outputValue = useTransition(costSum, {
  duration: 500,
})
watch(  
    () => tableData, 
    (newVal, oldVal) => {  
        getSum()
    },  
    { deep: true } // 开启深度监听，因为数组内部元素的变化需要被检测到  
  ); 
  
    
</script>      
<style>
.el-col {
    text-align: center;
}
</style>